import { Button, DatePicker, Form } from 'antd';
import { useMemo, useRef } from 'react';
import type { YmQueryFilterProps } from 'ym-design';
import { YmQueryFilter } from 'ym-design';

function YmQueryFilterPage() {
  const queryFilterRef = useRef(null);
  const [form] = Form.useForm();

  const formItems: YmQueryFilterProps['formItems'] = useMemo(
    () => [
      {
        name: 'name',
        label: '名字',
        valueType: {
          type: 'input',
          inputProps: {
            placeholder: '请输入名字',
          },
        },
        // colProps: {
        //   span: 16,
        // },
      },
      {
        name: 'age',
        label: '年龄',
        valueType: {
          type: 'inputNumber',
          inputNumberProps: {
            placeholder: '请输入年龄',
          },
        },
        // colProps: {
        //   span: 7,
        // },
      },
      {
        name: 'ageRange',
        label: '年龄段',
        valueType: {
          type: 'inputRange',
          inputRangeProps: {
            placeholder: '请输入年龄',
          },
        },
      },
      {
        name: 'birthday',
        label: '出生日期',
        valueType: {
          type: 'date',
          datePickerProps: {
            placeholder: '请选择出生日期',
            // mode: 'time',
          },
        },
      },
      {
        name: 'dateRange',
        label: '日期区间',
        valueType: {
          type: 'rangeDate',
          rangePickerProps: {},
        },
      },
      {
        name: 'sex',
        label: '性别',
        valueType: {
          type: 'select',
          selectProps: {
            placeholder: '请选择性别',
            options: [
              { value: 'meal', label: '男性' },
              { value: 'fMeal', label: '女性' },
            ],
          },
        },
      },
      {
        name: 'class',
        label: '班级',
        valueType: {
          type: 'select',
          selectProps: {
            placeholder: '请选择班级',
            mode: 'multiple',
            options: [
              { value: 'one', label: '一年级' },
              { value: 'tow', label: '二年级' },
            ],
          },
        },
      },
      {
        name: 'favorite1',
        label: '爱好',
        valueType: {
          type: 'checkbox',
          checkboxProps: {
            options: [
              { value: 'music', label: '音乐' },
              { value: 'sport', label: '体育' },
              { value: 'code', label: '敲代码' },
            ],
          },
        },
        colProps: {
          span: 6,
        },
      },
      {
        name: 'radio',
        label: 'radio',
        valueType: {
          type: 'radio',
          radioGroupProps: {
            options: [
              { value: 'test1', label: 'test1' },
              { value: 'test2', label: 'test2' },
              { value: 'code', label: '敲代码' },
            ],
          },
        },
        colProps: {
          span: 6,
        },
      },
      {
        name: 'workTime',
        label: '工作时间',
        children: <DatePicker.RangePicker></DatePicker.RangePicker>,
      },
    ],
    [],
  );

  return (
    <div className="query_filter_page">
      <YmQueryFilter
        form={form}
        ref={queryFilterRef}
        onCollapsed={(collapsed: boolean) => {
          console.log('--onSubmit--collapsed--', collapsed);
        }}
        // onReset={() => {
        //   console.log('--onReset--');
        // }}
        formItems={formItems}
        defaultCollapsed={false}
        initialValues={{ name: '张三' }}
        labelCol={{ style: { width: 72 } }}
        // labelWidth={80}
        // span={4}
        submitter={{
          onSubmit: (values: Record<string, any>) => {
            console.log('--queryFilter--values--:', values);
          },
          onReset: () => {
            console.log('--queryFilter--reset--:');
          },
        }}
      />
      <div>
        <Button
          onClick={() => {
            const formInstance = queryFilterRef.current?.getFormInstance();
            console.log(
              '--formInstance.getFieldsValue--',
              formInstance.getFieldsValue(),
            );
          }}
        >
          获取formValue方式1
        </Button>
        <Button
          onClick={() => {
            console.log('--form.getFieldsValue--:', form.getFieldsValue());
          }}
        >
          获取formValue方式2
        </Button>
      </div>
    </div>
  );
}

export default YmQueryFilterPage;
